<template>
  <NavigationBar>
    <div class="manage">
      <Divider style="color: blueviolet">筛选文章</Divider>
      <div class="head">
        <Row :gutter="20" style="text-align: center">
          <i-col span="5">
            <i-select @on-select="selectCategory" v-model="classify" filterable placeholder="分类烂">
              <Option :value="0" >全部</Option>
              <Option v-for="item in classifyList"  :value="item.id" :key="item.id">{{ item.name }}</Option>
            </i-select>
          </i-col>
          <i-col span="4">
            <i-select @on-select="selectComment" v-model="comment" filterable>
              <Option v-for="item in commentList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </i-select>
          </i-col>
          <i-col span="4">
            <i-select @on-select="selectSort" v-model="sort" filterable placeholder="排序类型" >
              <Option v-for="item in sortList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </i-select>
          </i-col>
          <i-col span="4">
            <i-select @on-select="selectOrder" v-model="order" filterable placeholder="排序方式" >
              <Option v-for="item in orderList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </i-select>
          </i-col>
          <i-col span="6">
            <i-input @on-search="searchTitle" search enter-button placeholder="搜索文章。。" />
          </i-col>
        </Row>
      </div>
      <div class="article" style="margin-top: 30px">
        <Row :gutter="16">
          <i-col span="12">
            <Divider style="color: #c08ee2">文章</Divider>
            <List item-layout="vertical" style="margin-left: 20px">
              <ListItem v-for="(item, index) in articleList" :key="item.id">
                <ListItemMeta :title="item.title" :description="item.description" />
                <template slot="action">
                  <li>
                    <Icon type="ios-thumbs-up-outline" />
                    {{item.hits}}
                  </li>
                  <li>
                    <Icon type="ios-chatbubbles-outline" />
                    {{item.commentAmount}}
                  </li>
                  <li>
                    <a @click="articleDetail(item.id)">查看</a>
                  </li>
                  <li>
                    <a @click="editArticle(item.id)">编辑</a>
                  </li>
                  <li>
                    <a @click="selectArticle(item.id)">查看评论</a>
                  </li>
                  <li>
                    <Tooltip content="是否开启评论？" placement="top">
                      <template>
                        <i-switch @on-change="allowCommentChange(index)" :value="item.allowComment" :true-value="true" :false-value="false" true-color="#3399FF" false-color="#ff4949" >
                          <span slot="open">开</span>
                          <span slot="close">关</span>
                        </i-switch>
                      </template>
                    </Tooltip>
                  </li>
                  <li>
                    <a @click="selectTop(true, index)" v-if="!item.topping">置顶</a>
                    <a @click="selectTop(false, index)" v-else style="color: red">取消置顶</a>
                  </li>
                  <li>
                    <a @click="deleteArticleById(index)" style="color: red">删除</a>
                  </li>
                </template>
                <template slot="extra">
                  <Avatar size="100" :src="item.image | image" />
                </template>
              </ListItem>
            </List>
          </i-col>
          <i-col span="12">
            <Divider style="color: #285aee">文章评论</Divider>
            <!--评论     allowDeleteAndUpdate说明是后台调用这个模块-->
            <Comment v-if="articleId !== 0" :articleId="articleId" :allowComment="true" :allowDeleteAndUpdate="true"/>
            <!--评论-->
          </i-col>
        </Row>
      </div>
    </div>
  </NavigationBar>
</template>

<script>
  import NavigationBar from "@/components/common/NavigationBar";
  import {deleteArticle, listManageVo, updateArticleAllowComment, updateArticleTop} from "@/network/manage";
  import {allCategories} from "@/network/write";
  import Comment from "@/components/common/Comment";

  export default {
    name: "Manage",
    components: {
      NavigationBar,
      Comment
    },
    data() {
      return {
        classifyList: [],
        classify: 0,
        commentList: [
          {
            value: -1,
            label: '全部'
          },
          {
            value: 1,
            label: '允许评论'
          },
          {
            value: 0,
            label: '不允许评论'
          }
        ],
        comment: -1,
        sortList: [
          {
            value: -1,
            label: '默认'
          },
          {
            value: 0,
            label: '时间'
          },
          {
            value: 1,
            label: '点击量'
          },
          {
            value: 2,
            label: '评论数'
          }
        ],
        sort: -1,
        orderList: [
          {
            value: -1,
            label: '默认'
          },
          {
            value: 0,
            label: '倒序'
          },
          {
            value: 1,
            label: '升序'
          }
        ],
        order: -1,
        //文章信息
        articleList: [],
        articleId: 0
      }
    },
    mounted() {
      this.getListManageVo(0, -1, -1, -1, null);
      this.allCategories();
    },
    methods: {
      //获取文章信息
      getListManageVo(categoryId, allowComment, sort, order, likeTitle) {
        listManageVo(categoryId, allowComment, sort, order, likeTitle).then(res => {
          if(res.code === 2000) {
            this.articleList =  res.data.manageVoList;
          }else {
            this.$Message.error({
              background: true,
              content: '获取文章数据失败！'
            })
          }
        }).catch(() => {
          this.$Message.error({
            background: true,
            content: '获取文章数据失败！'
          })
        })
      },
      //获取全部分类
      allCategories() {
        allCategories().then(res => {
          this.classifyList = res.data.categoriesList
        })
      },
      //分类选中
      selectCategory(name) {
        let categoryId = name.value;
        this.getListManageVo(categoryId, -1, -1, -1, null);
      },
      //是否评论选中
      selectComment(name) {
        let allowComment = name.value;
        this.getListManageVo(0, allowComment, -1, -1, null);
      },
      selectSort(name) {
        let sort= name.value;
        if(this.order === -1 && sort === -1) {
          this.getListManageVo(0, -1, -1, -1, null);
          return;
        }
        if(this.order === -1 || sort === -1) {
          return;
        }
        this.getListManageVo(0, -1, sort, this.order, null);
      },
      selectOrder(name) {
        let order = name.value;
        if(this.sort === -1 && order === -1) {
          this.getListManageVo(0, -1, -1, -1, null);
          return;
        }
        if(this.sort === -1 || order === -1) {
          return;
        }
        this.getListManageVo(0, -1, this.sort, order, null);
      },
      //搜索文章
      searchTitle(value) {
        if(value === '') {
          this.getListManageVo(0, -1, -1, -1, null);
          return;
        }
        this.getListManageVo(0, -1, -1, -1, value);
      },
      //改变允许评论状态
      allowCommentChange(index) {
        let articleId = this.articleList[index].id;
        let allowComment = !this.articleList[index].allowComment;
        updateArticleAllowComment(articleId, allowComment).then(res => {
          if(res.code === 2000) {
            this.$Message.success('更改状态成功！')
            this.articleList[index].allowComment = !this.articleList[index].allowComment
          }else {
            this.$Message.error('更改状态失败！')
            this.articleList[index].allowComment = !this.articleList[index].allowComment
          }
        })
      },
      //置顶
      selectTop(isTop, index) {
        let articleId = this.articleList[index].id;
        updateArticleTop(articleId, isTop).then(res => {
          if(res.code === 2000) {
            this.$Message.success('更改状态成功！')
            this.articleList[index].topping = !this.articleList[index].topping;
            return;
          }
          this.$Message.error('更改状态失败！')
        }).catch(() => {
          this.$Message.error('网络请求失败！')
        })
      },
      //删除文章根据id
      deleteArticleById(index) {
        let articleId = this.articleList[index].id;
        deleteArticle(articleId).then(res => {
          if(res.code === 2000) {
            this.$Message.success('删除成功！')
            this.articleList.splice(index, 1);
            return;
          }
          this.$Message.success('删除失败！')
        }).catch(() => {
          this.$Message.error('网络请求失败！')
        })
      },
      //获取评论
      selectArticle(articleId) {
        this.articleId = articleId;
        this.$store.commit('setArticleDetailId', articleId);
      },
      //文章详细
      articleDetail(articleId) {
        this.$store.commit("setArticleDetailId", articleId);
        this.$router.push({path: '/articleDetail'})
      },
      //编辑文章
      editArticle(articleId) {
        this.$router.push({
          name: 'Write',
          params: {
            articleId: articleId
          }
        })
      }
    },
    filters: {
      //如果分类图片不存在则设置一个默认的图片
      image(image) {
        if(image === null || image === '') {
          return 'http://dd.ddandang.top/blog/images/images.jpg'
        } else {
          return image;
        }
      }
    },
    watch: {
      articleId: function (val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
      }
    }
  }
</script>

<style scoped>

</style>